@use "sass:math";
@import "../../css/variables";

.blog-entry {
  display: flex;
  flex-direction: column;
  border-top: 1px solid $gray-300;
  padding-top: $spacer * 2;

  .blog-entry-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  h3 {
    font-size: 1.5rem;
    line-height: 1.4;
    margin-top: math.div($spacer, 2);
    margin-bottom: $spacer;

    a:hover {
      text-decoration: none;
    }
  }

  .blog-entry-date {
    font-size: $font-size-small;
    text-transform: uppercase;
    white-space: nowrap;
    margin-right: math.div($spacer, 3) * 2;
  }

  .blog-entry-category {
    font-size: $font-size-small;
    text-transform: uppercase;
    font-weight: 400;
    color: $gray-800;
  }

  .blog-entry-authors {
    ul {
      list-style-type: none;
      padding: 0;
      display: inline;

      li {
        display: inline-flex;
        align-items: center;

        &:not(:last-child) {
          margin-right: $spacer;

          &.avatars-only {
            margin-right: math.div($spacer, 4);
          }
        }

        img {
          width: 24px;
          height: 24px;
          border-radius: 12px;
          margin-right: math.div($spacer, 3);
        }
      }
    }
  }

  .blog-entry-summary {
    flex: 1;
    text-align: justify;
    hyphens: auto;
  }
}
